/**
 * Created by crystal on 16/10/18.
 */

window.onload = function () {
    getData();
    initPicture();
}

function getData() {
    //var dataInt={"khjl_name":'John',"khjl_tel":'123456'};
    $.ajax({
        type:"GET",
        url:"khjl_homepage.json",
        dataType:"application/json",
        contentType:charset="utf-8",
        success:function (data) {
            //转为JSON对象
            var data = eval('(' + data + ')');
            var d = data.data;
            $('#block').append('<span class = "words0">' + dataInt.khjl_name
                + '</span>');
            $('#block').append('<span class = "words1">' + dataInt.khjl_position
                + '</span>');
            $('#block').append('<span class = "words2">' + dataInt.khjl_tel
                + '</span>');
            $('#block').append('<span class = "words3">' + dataInt.khjl_wait_assign
                + '</span>');
            $('#block').append('<span class = "words1">' + dataInt.khjl_apply_assign
                + '</span>');
        },
        error:function () {
            alert("fail");
        }
    })
    // $('#block').append('<span class = "words1">' + dataInt.data[0].khjl_name
    //                 + '</span>');
    // console.log(dataInt.khjl_name);
    // $('#block0').append('<span class = "words0">' + dataInt.khjl_name
    //              + '</span>');
    // $('#block2').append('<span class = "words2">' + dataInt.khjl_tel
    //              + '</span>');
}

//页面大小自适应
$(function () {
    windowHeight();
});

function windowHeight() {
    var height = $(document).height();
    var width = $(document).width();
    //var p = getElementsByTagName("body");
    $('#contain').css({"height": height,"width": width});
    //p.css({"height": height,"width": width});
}

$(window).resize(function () {
    windowHeight();
})

//图片轮播效果
function initPicture() {
    var p = $('#picture');
    var pics = [{src:'images/home_pic.jpg',time:3000},{src:'images/picture-1.png',time:3000},
        {src:'images/picture-2.jpg',time:3000},{src:'images/picture-3.jpg',time:3000}];

    initPicPlayer(pics,p.css('width').split('px')[0],p.css('height').split('px')[0]);
    //console.log(p.css('height').split('px')[0]);

    function initPicPlayer(pics, w, h) {
        //选择的图片
        var selectedItem;
        //选中的按钮
        var selectedBtn;
        //自动播放的ID
        var playID;
        //选中图片的索引
        var selectedIndex;
        //容器
        var p = $('#picture');
        p.text('');
        for(var i = 0; i < pics.length; i++){
            //添加图片到容器中
            p.append('<img id ="picitem'+i+'"style="display: none;z-index: '
            + i +';" src=" '+pics[i].src+'" />' );
        }
        //添加按钮容器，绝对定位在右下角
        p.append('<div id="picbtnHolder" style="position:absolute;top: 550px;width: '
        +w+ 'px;height: 20px;z-index: 10000;"></div> ');

        var btnHolder = $('#picbtnHolder');

        btnHolder.append('<div id="picbtns" style="float:right;padding-right:1px;"></div>');

        var btns = $('#picbtns');
        for(var i = 0; i < pics.length; i++){
            //增加图片对应的按钮
            btns.append('<span id="picbtn'+i+'"style="cursor:pointer; border:solid 1px #00C69E;' +
                'background-color:#eee; display:inline-block;"> ' + (i+1) + '</span>');
            $('#picbtn'+i).data('index',i);
            $('#picbtn'+i).click(
                function () {
                    if($('#picitem' + $(this).data('index')).attr('src')){
                        setSelectedItem($(this).data('index'));
                        //console.log($(this).data('index'));
                    }
                }
            );
        }
        btns.append('');
        setSelectedItem(0);


        //显示指定的图片index
        function setSelectedItem(index) {
            selectedIndex = index;
            clearInterval(playID);
            if(selectedItem)
                selectedItem.fadeOut(1);
            selectedItem = $('#picitem' + index);
            selectedItem.fadeIn(1);
            
            if(selectedBtn)
            {
                selectedBtn.css('background-color','#eee');
                selectedBtn.css('color','#00C69E');
            }
            selectedBtn = $('#picbtn' + index);
            selectedBtn.css('background-color','#00C69E');
            selectedBtn.css('color','#eee');
            //自动播放
            playID = setInterval(function () {
                var index = selectedIndex + 1;
                if(index > pics.length-1)
                    index = 0;
                setSelectedItem(index);
            },pics[index].time);
        }
    }
}
